<template>
  <div style="display: flex; text-align: center">
    <el-popover
      width="800"
      placement="left"
      trigger="click"
      popper-class="popperOptions"
      :visible="isShow"
      ref="popoverRef"
    >
      <div style="font-size: 18px; text-align: center">Related accidents</div>
      <template #reference>
        <el-button
          :class="
            acceptedValue.accidentEverOccurred == '1'
              ? 'occurred'
              : 'noOccurred'
          "
          @click="isShowAccidents(acceptedValue.accidentEverOccurred)"
          v-click-outside="onClickOutside"
          style="text-align: center; margin-left: 42px"
        >
          {{
            acceptedValue.accidentEverOccurred === "1" ? "Yes" : "No"
          }}</el-button
        >
      </template>
      <el-table :data="tableData">
        <el-table-column
          v-for="(column, index) in columns"
          :prop="column.prop"
          :label="column.prop"
          :key="index"
          width="auto"
          align="center"
          header-align="center"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
        >
        </el-table-column>
      </el-table>
    </el-popover>
  </div>
</template>

<script setup lang="ts" name="AccidentModel">
import { ref, unref } from "vue";
import { ElMessage } from "element-plus";
import { ClickOutside as vClickOutside } from "element-plus";

let isShow = ref(false);
let acceptedValue = defineProps(["accidentEverOccurred"]);
let popoverRef = ref();

let tableData = [
  {
    year: "2004",
    date: "1.15",
    location: "unKnow",
    experimentalProject: "demo",
    accidentLevel: 1,
    accidentType: "explosion",
    degree: "undergrade",
    equipment: "common equipment",
    chemicals: "hazardous chemical",
    region: "China",
  },
  {
    year: "2004",
    date: "1.15",
    location: "unKnow",
    experimentalProject: "demo",
    accidentLevel: 1,
    accidentType: "explosion",
    degree: "undergrade",
    equipment: "common equipment",
    chemicals: "hazardous chemical",
    region: "China",
  },
];
const columns = Object.keys(tableData[0]).map((key) => ({
  prop: key,
  label: key.charAt(0).toUpperCase() + key.slice(1),
  width: 100,
}));

function isShowAccidents(value: string) {
  if (value === "1") {
    isShow.value = !isShow.value;
  } else {
    ElMessage({
      message: "This student has no related accidents!",
      type: "warning",
    });
  }
}
const onClickOutside = (e: any) => {
  if (
    isShow.value &&
    !unref(popoverRef).popperRef.contentRef.contains(e.target)
  ) {
    isShow.value = false;
  }
};
</script>

<style scoped>
.pass,
.noOccurred {
  /* width: 20px; */
  text-align: center;
  background-color: #70c546;
  border-style: solid;
  border-radius: 5px;
  border-width: 3px;
  border-color: #70c546;
}
.noPass,
.occurred {
  text-align: center;
  text-decoration: underline;
  background-color: #f56c6c;
  border-style: solid;
  border-radius: 5px;
  /* border-width: 4px; */
  border-color: #f56c6c;
}
.popperOptions {
  width: 800px;
}
</style>
